<template>
  <view class="pointer">
    <block v-for="(item,index) in filterData(data)" :key="index">
      <template v-if="!item.children || !item.children.length">
        <uni-menu-item :index="item">
          <view :class="item.icon"></view>
          <text :class="{title: item.icon}">{{item.title}}</text>
        </uni-menu-item>
      </template>
      <uni-sub-menu v-else :index="item">
        <template v-slot:title>
          <view :class="item.icon"></view>
          <text :class="{title: item.icon}">{{item.title}}</text>
        </template>
        <uni-menu-sidebar class="item-bg" :data="item.children" :key="item._id" />
      </uni-sub-menu>
    </block>
  </view>
</template>

<script>
  export default {
    name: 'uniMenuSidebar',
    props: {
      data: {
        type: Array,
        default () {
          return []
        }
      }
    },
    computed: {
    },
    data() {
      return {};
    },
    methods: {
      filterData(list) {
        let newList = [];
        list.forEach(item => {
          const newItem = { ...item };
          
          if(newItem.children){
            newItem.children = this.filterData(newItem.children);
          }
          
          if(newItem.type != "page"){
            newList.push(newItem)
          }
        });
        
        return newList;
      },
    }
  }
</script>

<style lang="scss">
  .title {
    margin-left: 5px;
  }
</style>